<div
  fxLayout="row wrap"
  fxLayout.lt-sm="column"
  fxLayoutAlign="flex-start"
  fxLayoutGap.gt-sm="10px"
>
  <div fxFlex.lt-sm="100%" fxFlex="0 1 calc(60% - 10px)" fxFlex.lt-md="100%">
    <label>Civilian Work Priority: {{ ms.game.civilianWorkPercent }}% </label>
    <nz-slider
      [(ngModel)]="ms.game.civilianWorkPercent"
      nzSize="small"
      [nzTipFormatter]="formatter"
    ></nz-slider>

    <h2>
      Space Stations
      <i
        class="info-icon"
        nz-icon
        nzType="info-circle"
        nzTheme="outline"
        nz-tooltip
        nzTooltipTitle="Space Stations grant habitable space. Build price increases exponentially."
      ></i>
    </h2>
    <nz-table
      #stationsTable
      nzSize="small"
      [nzData]="listOfStations"
      [nzShowPagination]="false"
    >
      <thead>
        <tr>
          <th>Name</th>
          <th>
            <i
              nz-icon
              [nzType]="ms.game.resourceManager.shipyardWork.icon"
              [ngClass]="ms.game.resourceManager.shipyardWork.colorClass"
            ></i>
            Price
          </th>
          <th>
            <i
              nz-icon
              [ngClass]="ms.game.resourceManager.habitableSpace.colorClass"
              [nzType]="ms.game.resourceManager.habitableSpace.icon"
            ></i>
            Hab. Space
          </th>
          <th>Price/Space</th>
          <th>Queue?</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of stationsTable.data; trackBy: getUnitId">
          <td>
            {{ data.name }}
            <span class="monospace">
              ({{ data.quantity | format: true }})
            </span>
          </td>
          <td class="monospace">{{ data.buildPriceNext | format }}</td>
          <td class="monospace">{{ data.habSpace | format }}</td>
          <td class="monospace">{{ data.priceDivDabSpace | format }}</td>
          <td>
            <button
              nz-button
              nzType="primary"
              nzSize="small"
              (click)="addStation(data)"
            >
              <span>Queue</span>
            </button>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- Infrastructures -->
    <div
      class="infrastructures"
      *ngIf="ms.game.resourceManager.unlockedInfrastructures.length > 0"
    >
      <h2>
        Infrastructures
        <i
          class="info-icon"
          nz-icon
          nzType="info-circle"
          nzTheme="outline"
          nz-tooltip
          nzTooltipTitle="Infrastructures improve ships speed and acceleration. Build price increases exponentially."
        ></i>
      </h2>
      <nz-table
        #infraTable
        nzSize="small"
        nzTemplateMode
        [nzShowPagination]="false"
      >
        <thead>
          <tr>
            <th>Name</th>
            <th>
              <i
                nz-icon
                [nzType]="ms.game.resourceManager.shipyardWork.icon"
                [ngClass]="ms.game.resourceManager.shipyardWork.colorClass"
              ></i>
              Price
            </th>
            <th
              nz-tooltip
              nzTooltipTitle="Increase ships speed and acceleration"
            >
              Bonus
            </th>
            <th
              nz-tooltip
              nzTooltipTitle="Increase ships speed and acceleration"
            >
              Tot. Bonus
            </th>
            <th>Price/Bonus</th>
            <th>Queue?</th>
          </tr>
        </thead>
        <tbody>
          <tr
            *ngFor="
              let infra of ms.game.resourceManager.unlockedInfrastructures;
              trackBy: getUnitId
            "
          >
            <td>
              {{ infra.name }}
              <span class="monospace">
                ({{ infra.quantity | format: true }})
              </span>
            </td>
            <td class="monospace">{{ infra.buildPriceNext | format }}</td>
            <td class="monospace">{{ infra.speedBonusUi | format }}%</td>
            <td class="monospace">{{ infra.totalBonusUi | format }}%</td>
            <td class="monospace">{{ infra.priceDivBonus | format }}</td>
            <td>
              <button
                nz-button
                nzType="primary"
                nzSize="small"
                (click)="addStation(infra)"
              >
                <span>Queue</span>
              </button>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>

    <!-- Megastructures -->
    <div
      class="megastructures"
      *ngIf="ms.game.resourceManager.unlockedMegastructures.length > 0"
    >
      <h2>Megastructures</h2>

      <div fxLayout="row" fxLayoutGap="0.5rem" class="mega-recap">
        <span
          >Built: <span class="monospace"></span>
          {{ ms.game.spaceStationManager.megaBuilt | format: true }}
        </span>
        <span
          >Queued: <span class="monospace"></span>
          {{ megaQueue | format: true }}
        </span>
        <span
          >Next Price: <span class="monospace"></span>
          {{ ms.game.spaceStationManager.nextMegaPrice | format: true }}
        </span>
      </div>

      <ng-container
        *ngFor="
          let mega of ms.game.resourceManager.unlockedMegastructures;
          trackBy: getUnitId
        "
      >
        <button
          class="mega-button"
          nz-button
          nz-popover
          nzType="primary"
          [nzPopoverTitle]="mega.name"
          [nzPopoverContent]="megaTemplate"
          (click)="addStation(mega)"
        >
          <span>{{ mega.name }}</span>
          <span *ngIf="mega.quantity.gt(0)" class="monospace mega-qta">
            {{ mega.quantity | format: true }}
          </span>
        </button>
        <ng-template #megaTemplate>
          <p *ngIf="mega.description !== ''">{{ mega.description }}</p>
          <ul class="list-unstyled">
            <li *ngFor="let wm of mega.workerMulti">
              +{{ wm.multi | percent }}
              <span class="text-secondary">maximum</span> {{ wm.worker.name }}
            </li>
            <li *ngFor="let wf of mega.effMulti">
              {{ wf.worker.name }} <span class="text-secondary">yields</span>
              {{ wf.multi | percent }} more
            </li>
          </ul>
        </ng-template>
      </ng-container>
    </div>
  </div>
  <div
    fxFlex.lt-md="100%"
    fxFlex.md="0 1 calc(40% - 10px)"
    fxFlex.lg="0 1 calc(35% - 10px)"
    fxFlex.xl="0 1 calc(30% - 10px)"
  >
    <!-- <h2>Jobs</h2> -->
    <div class="sort-form">
      <button nz-button (click)="ms.game.spaceStationManager.sortJobs()">
        <i nz-icon nzType="sort-ascending" nzTheme="outline"></i>
        <span>Sort</span>
      </button>
      <label nz-checkbox [(ngModel)]="ms.game.spaceStationManager.sort"
        >Auto Sort</label
      >
    </div>
    <div
      cdkDropList
      [cdkDropListData]="ms.game.spaceStationManager.toDo"
      class="job-list"
      (cdkDropListDropped)="drop($event)"
    >
      <app-job
        cdkDrag
        class="job-box"
        *ngFor="let resToDo of ms.game.spaceStationManager.toDo"
        [job]="resToDo"
        [collection]="ms.game.spaceStationManager.toDo"
      ></app-job>
    </div>
  </div>
</div>
